<template>
  <div class="none" v-if="show == false && searchValue.length == 0">回收站暂无项目内容</div>
  <div class="contentlist" v-if="show || searchValue.length > 0">
    <!-- 无数据时显示暂无项目内容 -->
    <div class="top" v-if="show || searchValue.length > 0">
      <a-row>
        <a-col :span="8" class="left color_6f6d9d">
          <div class="selectall">
            <div class="quanbushanchu">
              <div>
                <button class="batchDelete" @click="showCheckbox = true" v-if="!showCheckbox">选择</button>
              </div>
              <div v-if="showCheckbox" class="deleteAllFunction">
                <button @click="showCheckbox = false" class="cancelDeletion">取消选择</button>
                <button class="selectAll" @click="handleCheckAllChange">
                  <i class="appIcon-iconfont appIcon-duoxuan check-icon" v-if="mainStore.checkAlls"></i>
                  <i class="appIcon-iconfont appIcon-weixuan check-icon" v-if="!mainStore.checkAlls"></i>
                  全选
                  <!-- <a-checkbox v-model:checked="checkAll" @change="onCheckAllChange">全选</a-checkbox> -->
                </button>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="8" class="center color_413a50">
          <div v-if="!showCheckbox">共{{ dataList.length }}个项目</div>
          <div class="reduction" @click="reductionFn" v-if="showCheckbox && Array.from(checkboxValue).length > 0">
            <dd>
              <i class="appIcon-iconfont appIcon-lajixiang-huanyuanmoren"></i>
            </dd>还原
          </div>
          <div class="delete" @click="handledelete" v-if="showCheckbox && Array.from(checkboxValue).length > 0">
            <dd>
              <i class="appIcon-iconfont appIcon-shanchu"></i>
            </dd>删除
          </div>
        </a-col>
        <a-col :span="8" class="right color_6f6d9d">
          <!-- 搜索 -->
          <div class="sousuoxin">
            <!-- <input type="text" name id /> -->
            <a-input autocomplete='off' id="sousuoinp" :class="sousuo ? 'inpxin' : ''" v-model:value="searchValue"
              placeholder="搜索项目名称" />
            <div class="searchclass" @click="sousuoFn"
              :style="{ background: sousuo ? '#686CE8' : '#ffffff', color: sousuo ? '#ffffff' : '' }">
              <i class="appIcon-iconfont appIcon-sousuo"></i>
            </div>
          </div>
          <div class="list_chart" @click="changetype(1)" v-if="type == 1">
            <i class="appIcon-iconfont appIcon-tubiaozhanshi"></i>
          </div>
          <div class="list_chart" @click="changetype(2)" v-else>
            <i class="appIcon-iconfont appIcon-liebiaozhanshi"></i>
          </div>
        </a-col>
      </a-row>
    </div>
    <!-- 图表 -->
    <div class="classlist" v-if="type == 1 && show">
      <ul>
        <!-- <a-checkbox-group v-model:value="checkboxValue" style="width: 100%;"> -->
        <li v-for="(item, index) in dataList" :key="index" :style="`height:${height}px`"
          :class="`animate__animated animate__fadeInUp animate__delay-0${index % 5}s`">
          <div class="box conentbox" :style="`background:${item.params.bgColor}`">
            <img :src="item.imageUrl" v-if="item.imageUrl" />
            <!-- <a-checkbox :value="item.hhxsChartId" class="checkbox groupbox" v-show="showCheckbox"></a-checkbox> -->
            <div class="checkbox groupbox" @click="checkboxChange(item.hhxsChartId)" v-if="showCheckbox">
              <i class="appIcon-iconfont appIcon-weixuan check-icon" v-if="!checkboxValue.has(item.hhxsChartId)"></i>
              <i class="appIcon-iconfont appIcon-duoxuan check-icon" v-if="checkboxValue.has(item.hhxsChartId)"></i>
            </div>
            <div class="edit">
              <a-tooltip placement="top" overlayClassName="draw_atooltip">
                <dd @click="toBack(item)" class="listRestore">
                  <i class="appIcon-iconfont appIcon-lajixiang-huanyuanmoren color_a8b5d7"></i>
                </dd>
                <template #title>还原</template>
              </a-tooltip>

              <a-tooltip placement="top" overlayClassName="draw_atooltip">
                <dd @click="deleteitem(item)">
                  <i class="appIcon-iconfont appIcon-wenjianhuishou-zhihuimoren color_a8b5d7"></i>
                </dd>
                <template #title>清理</template>
              </a-tooltip>
            </div>
            <div class="mask"></div>
          </div>
          <dl class="name_inp">
            <p>{{ item.title }}</p>
          </dl>
        </li>
        <!-- </a-checkbox-group> -->
      </ul>
    </div>
    <!-- 列表 -->
    <div class="classlist2" v-if="type == 2 && show">
      <ul>
        <!-- <a-checkbox-group v-model:value="checkboxValue" style="width: 100%;"> -->
        <li v-for="(item, index) in dataList" :key="index"
          :class="`animate__animated animate__fadeInUp animate__delay-0${index % 10}s`">
          <div class="box">
            <!-- <a-checkbox :value="item.hhxsChartId" class="checkbox groupbox" v-show="showCheckbox"></a-checkbox> -->
            <div class="checkbox groupbox" @click="checkboxChange(item.hhxsChartId)" v-if="showCheckbox">
              <i class="appIcon-iconfont appIcon-weixuan check-icon" v-if="!checkboxValue.has(item.hhxsChartId)"></i>
              <i class="appIcon-iconfont appIcon-duoxuan check-icon" v-if="checkboxValue.has(item.hhxsChartId)"></i>
            </div>
            <img :src="item.imageUrl" v-if="item.imageUrl" />
            <img src="https://picsum.photos/id/11/10/6" v-else />
            <p>{{ item.title }}</p>
          </div>
          <div class="editlist">
            <a-tooltip placement="top" overlayClassName="draw_atooltip">
              <dd @click="toBack(item)">
                <i class="appIcon-iconfont appIcon-lajixiang-huanyuanmoren color_a8b5d7"></i>
              </dd>
              <template #title>还原</template>
            </a-tooltip>

            <a-tooltip placement="top" overlayClassName="draw_atooltip">
              <dd @click="deleteitem(item)">
                <i class="appIcon-iconfont appIcon-wenjianhuishou-zhihuimoren color_a8b5d7"></i>
              </dd>
              <template #title>清理</template>
            </a-tooltip>
          </div>
        </li>
        <!-- </a-checkbox-group> -->
      </ul>
    </div>
    <!-- 未找到内容 -->
    <div class="inpnone" v-if="searchValue.length > 0 && !show">
      <div class="text">未找到该项目内容</div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import request from "@/utils/request"
import { copyText, readClipboard } from '@/utils/clipboard'
import { message } from 'ant-design-vue'
import { useMainStore, useSlidesStore } from '@/store'
import { getBoxWidth } from '@/hooks/useGlobalFun'
import { toRaw } from '@vue/reactivity'

export default defineComponent({
  name: 'Contentlist',
  setup() {
    const sousuo = ref<boolean>(false)
    let height = ref(250)
    const copyState = ref('复制')
    const searchValue = ref('')
    const router = useRouter()
    const value = ref<string>('')
    const visible = ref<boolean>(false)
    const fareurl = ref<string>('')
    const showCheckbox = ref<boolean>(false)
    const show = ref<boolean>(true) // 判断有无数据
    const mainStore = useMainStore()
    let checkboxValue = ref(new Set()) //创建新数组存放选择id

    const page = reactive({
      current: 1,
      size: 1000
    })
    const showModal = () => {
      visible.value = true
    }
    // 点击全选
    const handleCheckAllChange = () => {
      mainStore.$patch({
        checkAlls: !mainStore.checkAlls
      })
    }
    //批量选择
    let checkboxChange = (v: any) => {
      // console.log(v);
      if (checkboxValue.value.has(v)) {
        checkboxValue.value.delete(v)
      } else {
        checkboxValue.value.add(v)
      }
      // var list = toRaw(checkboxValue.value.Entries.menuList)
      // console.log(Array.from(checkboxValue.value))
      // var arr = Array.from(checkboxValue.value)
      // console.log(arr, 'qwe')
      // mainStore.$patch({
      //   delmoreitem: arr
      // })
      // console.log(...toRaw(mainStore.checkboxValue));
      // console.log(mainStore.checkboxValue);
    }

    //全选和取消全选
    watch(
      () => mainStore.checkAlls,
      (newValue, oldValue) => {
        if (newValue) {
          dataList.value.forEach((element: any) => {
            checkboxValue.value.add(element.hhxsChartId)
          })
        } else {
          checkboxValue.value = new Set()
        }
        // mainStore.$patch({
        //   checkboxValue: checkboxValue.value,
        // });
      }
    )
    // 选择和取消选择
    watch(
      () => showCheckbox,
      (newValue, oldValue) => {
        checkboxValue.value = new Set()
        mainStore.$patch({
          checkAlls: false,
        })
      }
    )
    // 点击搜索事件
    const sousuoFn = () => {
      sousuo.value = !sousuo.value
      if (sousuo.value) {
        // console.log(document.getElementById('sousuoinp'))
        document.getElementById('sousuoinp')?.focus()
      } else {
        searchValue.value = ''
        // console.log(12)
      }
    }
    const handleOk = (e: MouseEvent) => {
      // console.log(e)
      visible.value = false
    }
    const groupchange = () => {
      // console.log(checkboxValue, 'checkboxValue')
    }
    const toBack = (item: any) => {
      request.get(`/hhxs-ssc/sc/chart/restoreChart/${item.hhxsChartId}`).then((res: any) => {
        if (res.data.code === 200) {
          getDataList()
        }
      })
    }
    const copyUrl = () => {
      copyText(fareurl.value).then((res: any) => {
        // console.log(fareurl, res)
        copyState.value = '复制成功'
      })
    }

    const type = ref(1)
    let dataList: any = ref([])
    const state = reactive({
      indeterminate: true,
      checkAll: false,
      checkedList: [],
    })
    const onSearch = (searchValue: string) => {
      // console.log('use value', searchValue)
      // console.log('or use this.value', value.value)
      getDataList()
    }
    //搜索--监听事件
    watch(
      () => searchValue.value,
      (newValue, oldValue) => {
        // console.log(newValue)
        getDataList()
      }
    )
    // const onCheckAllChange = (e: any) => {
    //   for (let i = 0; i < dataList.value.length; i++) {
    //     checkboxValue.value.push(dataList.value[i].hhxsChartId)
    //   }
    //   Object.assign(state, {
    //     checkedList: e.target.checked ? checkboxValue : [],
    //     indeterminate: false,
    //   })
    //   // showCheckbox.value = e.target.checked
    // }
    const changetype = (val: number) => {
      val === 1 ? type.value = 2 : type.value = 1
    }
    const getDataList = () => {
      request.post(`/hhxs-ssc/sc/chart/recycleBinList`, {
        title: searchValue.value,
        size: page.size,
        current: page.current,
        // sort: true
        // orders: [{ asc: true, column: "" }]
      }).then((res: any) => {
        // console.log(searchValue.value.length)
        // console.log(res, "数据")
        if (res.data.data.total === 0) {
          show.value = false
        } else {
          show.value = true
          dataList.value = res.data.data.records
        }
      })
    }
    const toDetail = (id: string) => {
      router.push({
        path: '/freeeditor',
        query: {
          id: id
        }
      })
    }
    // 批量还原
    const reductionFn = () => {
      if (Array.from(checkboxValue.value).length === 0) {
        message.warn('请选择要还原的项目')
      } else {
        // console.log(checkboxValue.value)
        request.post('/hhxs-ssc/sc/chart/restoreChartBatch', Array.from(checkboxValue.value))
          .then((res: any) => {
            if (res.data.code === 200) {
              // console.log('huanyuan')
              getDataList()
              showCheckbox.value = false
            }
          })
      }
    }
    // 批量删除
    const handledelete = () => {
      if (Array.from(checkboxValue.value).length === 0) {
        message.warn('请选择要删除的项目')
      } else {
        mainStore.$patch({
          del: true,
          deltype: 0
        })
      }
      // console.log(checkboxValue.value)
      // if (checkboxValue.value.length === 0) {
      //   message.warn('请选择要删除的项目')
      // }
      // request.post('/hhxs-ssc/sc/chart/recycleBinDeleteBatch', checkboxValue.value)
      //   .then((res: any) => {
      //     if (res.data.code === 200) {
      //       getDataList()
      //       showCheckbox.value = false
      //       checkboxValue.value = []
      //     }
      //   })
    }
    // 批量删除监听
    watch(() => mainStore.delmore, val => {
      // console.log(123456789999)
      // console.log(Array.from(checkboxValue.value))
      if (mainStore.delmore) {
        request.post('/hhxs-ssc/sc/chart/recycleBinDeleteBatch', Array.from(checkboxValue.value))
          .then((res: any) => {
            if (res.data.code === 200) {
              getDataList()
              showCheckbox.value = false
              checkboxValue.value = new Set()
              mainStore.$patch({
                delmore: false
              })
            }
          })
      }
    })
    // 删除一个
    const deleteitem = (item: any) => {
      // console.log(item)
      mainStore.$patch({
        del: true,
        deloneitem: item.hhxsChartId,
        deltype: 1
      })
    }
    // 监听删除事件-删除一个
    watch(
      () => mainStore.delone,
      val => {
        // console.log('一键通')
        request.get(`/hhxs-ssc/sc/chart/recycleBinDelete/${mainStore.deloneitem}`)
          .then((res: any) => {
            if (res.data.code === 200) {
              getDataList()
              mainStore.$patch({ delone: false })
            }
          })
      },
    )


    const getBoxHeight = () => {
      const width = (getBoxWidth('.list') / 5) - 40
      height.value = (width * 208 / 248) + 43
    }

    watch(
      () => state.checkedList,
      val => {
        state.checkAll = val.length === dataList.value.length
      },
    )
    watch(
      () => type.value,
      val => {
        // console.log(val)
        nextTick(() => {
          val === 1 ? getBoxHeight() : ''
        })
      },
    )
    onMounted(async () => {
      await getDataList()
      getBoxHeight()
      window.addEventListener('resize', () => {
        type.value === 1 ? getBoxHeight() : ''
      })
    })
    return {
      ...toRefs(state),
      onSearch,
      // onCheckAllChange,
      changetype,
      type,
      value,
      getDataList,
      handledelete,
      checkboxValue,
      dataList,
      toDetail,
      deleteitem,
      toBack,
      handleOk,
      showModal,
      copyUrl,
      fareurl,
      visible,
      showCheckbox,
      groupchange,
      getBoxHeight,
      height,
      copyState,
      searchValue,
      page,
      sousuo,
      sousuoFn,
      show,
      mainStore,
      handleCheckAllChange,
      checkboxChange,
      reductionFn
    }
  },
})
</script>
<style>
/* 控制主体颜色 */
.draw_atooltip .ant-tooltip-inner {
  color: #333 !important;
  background-color: #fff !important;
}

/* 控制三角形颜色 */

.draw_atooltip .ant-tooltip-arrow-content {
  background-color: #fff;
}
</style>
<style lang='scss' scoped>
.check-icon {
  color: #ffba00;
}

.none {
  background: #fff;
  border-radius: 30px;
  height: calc(100% - 40px);
  padding: 30px 0;
  margin: 20px 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7a8bbf;
  font-size: 18px;
}

.contentlist {
  background: #fff;
  border-radius: 30px;
  height: calc(100% - 40px);
  padding: 30px 0;
  margin: 20px 20px 0 0;

  // 未找到内容
  .inpnone {
    width: 100%;
    height: calc(100% - 42px);
    display: flex;
    align-items: center;
    justify-content: center;

    .text {
      width: 144px;
      height: 18px;
      font-family: PingFangSC-Regular;
      font-size: 18px;
      color: #7a8bbf;
      letter-spacing: 0;
      line-height: 18px;
      font-weight: 400;
    }
  }
}

.top {
  padding: 0 52px;

  .left {
    display: flex;
    align-items: center;

    .deleteAllFunction {
      display: flex;

      .batchDelete {
        width: 86px;
        height: 42px;
        background: #fff;
        border: 1px solid rgba(230, 229, 255, 1);
        border-radius: 10px;
        cursor: pointer;

        &:hover {
          color: $textH2Color;
        }
      }

      .cancelDeletion {
        width: 86px;
        height: 42px;
        background: #fff;
        border: 1px solid rgba(230, 229, 255, 1);
        border-radius: 10px;
        cursor: pointer;
        margin-right: 20px;

        &:hover {
          color: $textH2Color;
        }
      }

      .selectAll {
        width: 86px;
        height: 42px;
        background: #fff;
        border: 1px solid rgba(230, 229, 255, 1);
        border-radius: 10px;
      }
    }

    .batchDelete {
      width: 86px;
      height: 42px;
      background: #fff;
      border: 1px solid rgba(230, 229, 255, 1);
      border-radius: 10px;
      cursor: pointer;

      &:hover {
        color: $textH2Color;
      }
    }
  }

  .center {
    display: flex;
    align-items: center;
    justify-content: center;

    .reduction {
      float: left;
      margin-right: 20px;
      background: #fff;
      height: 42px;
      line-height: 42px;
      box-shadow: 0 4px 20px 0 rgba(87, 98, 253, 0.1);
      display: flex;
      padding-right: 10px;
      border-radius: 8px;
      cursor: pointer;
      color: #6294ff;

      dd {
        background: #e8efff;
        border-radius: 8px;
        width: 42px;
        height: 42px;
        text-align: center;
        margin-right: 10px;
      }
    }

    .delete {
      float: left;
      background: #fff;
      height: 42px;
      line-height: 42px;
      box-shadow: 0 4px 20px 0 rgba(87, 98, 253, 0.1);
      display: flex;
      padding-right: 10px;
      border-radius: 8px;
      cursor: pointer;
      color: #ff6370;

      dd {
        background: #fff1f2;
        border-radius: 8px;
        width: 42px;
        height: 42px;
        text-align: center;
        margin-right: 10px;
      }
    }
  }

  .right {
    display: flex;
    justify-content: flex-end;

    .sousuoxin {
      display: flex;
      // margin-right: 12px;
      align-items: center;
      position: relative;

      .ant-input {
        width: 0;
        height: 42px;
        border: none;
        margin-right: -42px;
        z-index: 3;
        border-radius: 21px;
        transition: all 0.5s ease-in-out;
      }

      .searchclass {
        width: 42px;
        height: 42px;
        background: #fff;
        border-radius: 21px;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 5;

        &:hover {
          box-shadow: 0 0 20px 0 rgba(104, 108, 232, 0.15);
          border: 1px solid rgba(243, 243, 255, 1);
          color: #686ce8;
        }
      }

      .inpxin {
        width: 200px;
        height: 42px;
        padding: 0 42px 0 10px;
        box-shadow: 0 0 30px 0 rgba(104, 108, 232, 0.1);
      }
    }

    .list_chart {
      width: 42px;
      height: 42px;
      margin-left: 5px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        border: 1px solid rgba(243, 243, 255, 1);
        box-shadow: 0 0 20px 0 rgba(104, 108, 232, 0.15);
        color: #686ce8;
      }
    }
  }
}

.list2 {
  overflow: hidden;
  height: calc(100% - 50px);

  ul {
    padding: 10px 0;
    height: 100%;
    overflow-y: scroll;
  }

  li {
    display: flex;
    height: 80px;
    align-items: center;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: 20px;
    padding: 0 20px;

    &:hover {
      box-shadow: 0 2px 20px 0 rgba(87, 98, 253, 0.13);
      border-radius: 15px;
    }

    .box {
      display: flex;
      align-items: center;
      font-size: 18px;

      p {
        cursor: default;
        font-size: 16px;
      }

      img {
        width: 63px;
        height: 54px;
        border-radius: 8px;
        margin: 0 20px;
        cursor: default;
      }
    }

    .edit {
      display: flex;
      color: $textH2Color;

      dd {
        margin-right: 20px;
      }

      .appIcon-iconfont {
        color: $textDisabledColor;
        font-size: 18px;

        &:hover {
          color: #686ce8;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.draw_atooltip {
  .ant-tooltip-inner {
    width: 50px;
    height: 30px;
    background: #fff;
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
    font-size: 12px;
    border-radius: 5px;
    text-align: center;
  }
}
</style>
